@charset "utf-8";

@import "./reset.scss";
@import "./common.scss";

@function getvw($w) {
    @return $w / 1920 * 100 + vw;
}

nav{
    ul{
        li:nth-child(3){
            a{
                color: #ff4a11;
            }
        }
    }
}

main{
    width: 100%;
    margin-top: getvw(80);
    .banner{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        img{
            width: 100%;
            display: inline-block;
        }
        ul{
            width: getvw(1360);
            display: flex;
            flex-wrap: wrap;
            position: absolute;
            top: 0;
            li{
                width: getvw(272);
                height: getvw(180);
                cursor: pointer;
                img{
                    width: 100%;
                    display: inline-block;
                }
            }
        }
        .bigPicture{
            width: getvw(816);
            height: getvw(540);
            position: absolute;
            top: 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .solve{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f5f5f5;
        padding-bottom: getvw(100);
        h1{
            font-size: getvw(60);
            font-weight: bold;
            margin-top: getvw(190);
        }
        span{
            font-size: getvw(24);
            letter-spacing: getvw(14);
            color: gray;
            margin-top: getvw(22);
        }
        p{
            font-size: getvw(30);
            margin-top: getvw(26);
        }
        ol{
            width: getvw(1400);
            display: flex;
            justify-content: space-between;
            margin-top: getvw(60);
            li{
                width: getvw(340);
                text-align: center;
                img{
                    width: getvw(200);
                }
                h2{
                    margin-top: getvw(30);
                    font-size: getvw(24);
                }
                h3{
                    margin-top: getvw(28);
                }
                h4{
                    margin-top: getvw(25);
                    font-size: getvw(18);
                }
                img:last-child{
                    width: getvw(28);
                    margin-top: getvw(40);
                }
            }
        }
    }
    .goodCase{

        display: flex;
        flex-direction: column;
        align-items: center;
        h1{
            font-size: getvw(48);
            color: #555555;
            font-weight: bold;
            margin-top: getvw(107);
        }
        p{
            font-size: getvw(24);
            color: #888888;
            letter-spacing: getvw(14);
            margin-top: getvw(14);
        }
        ul{
            width: getvw(587);
            display: flex;
            justify-content: space-between;
            margin-top: getvw(46);
            li{
                font-size: getvw(18);
                color: #888888;
                cursor: pointer;
                &:hover{
                    color: #ff3d00;
                }
            }
        }
        .bigPhoto{
            width: 100%;
            margin-top: getvw(55);
            display: none;
            .casePhoto{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                li{
                    width: calc(100% / 3);
                    height: getvw(480);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    position: relative;
                    transition: all ease 2s;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    .background{
                        width: 100%;
                        height: 100%;
                        background-color: black;
                        opacity: 0;
                        position: absolute;
                        top: 0;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        z-index: 1;
                        h1{
                            margin-top: getvw(160);
                            font-weight: normal;
                            font-size: getvw(36);
                            color: white;
                        }
                        .line{
                            width: getvw(80);
                            height: getvw(2);
                            background-color: white;
                            margin-top: getvw(20);
                        }
                        p{
                            font-size: getvw(24);
                            margin-top: getvw(25);
                            color: white;
                            letter-spacing: getvw(5);
                        }
                        button{
                            width: getvw(200);
                            height: getvw(50);
                            background-color: #ff3d00;
                            border-radius: getvw(25);
                            margin-top: getvw(50);
                            cursor: pointer;
                        }
                        &:hover{
                            opacity: 0.75;
                        }
                    }
                }
                li:nth-child(5){
                    z-index: 10;
                    cursor: pointer;
                }
            }
        }
        .photo{
            width: 100%;
            height: getvw(1440);
            margin-top: getvw(55);
            display: none;
            img{
                width: 100%;
                height: 100%;   
            }
        }
        //点击事件添加的类名
        .change{
            color: #ff3d00;
        }
        .active{
            display: block;
        }
        
    }
    .partner{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        p{
            margin-top: getvw(110);
            font-size: getvw(55);
            font-weight: bold;
        }
        span{
            margin-top: getvw(15);
            font-size: getvw(25);
        }
        ul{
            width: getvw(1400);
            height: getvw(450);
            display: flex;
            flex-wrap: wrap;
            margin-top: getvw(55);
            li{
                width: getvw(233);
                height: getvw(150);
                img{
                    width: 100%;
                }
            }
        }
    }
}

//点击事件添加的类名
.moveA{
    transform: translateX(getvw(640)) translateY(getvw(480));
}
.moveB{
    transform: translateY(getvw(480));
}
.moveC{
    transform: translateX(getvw(-640)) translateY(getvw(480));
}
.moveD{
    transform: translateX(getvw(640));
}
.moveE{
    transform: translateX(getvw(-640));
}
.moveF{
    transform: translateX(getvw(640)) translateY(getvw(-480));
}
.moveG{
    transform: translateY(getvw(-480));
}
.moveH{
    transform: translateX(getvw(-640)) translateY(getvw(-480));
}